<template>
    <div class="sheet-list">
        <div class="sheet-header" @click="toggleSheet">
            <span class="sheet-header-span">{{data_item.name}}</span>
            <i class="sheet-header-i icon iconfont" :class="showSheets?'icon-jiantou-shang':'icon-jiantou-xia'"></i>
        </div>
        <div v-if="showSheets" class="sheet-content">
            <div class="sheet-content-list" v-for="(list,index) in data_item.details" :key="index">{{list}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            showSheets:false,
            data_item:{}
        }
    },
    props: {
        item:{
            type:Object
        }
    },
    methods:{
        toggleSheet:function(){
            this.showSheets = !this.showSheets;
        }
    },
    created(){
        this.data_item = this.item;
    },
}
</script>

<style lang="stylus" scoped>
.sheet-list{
    clear: both;
}
.sheet-header{
    height: 50px;
    color:#333333;
    position: relative;
}
.sheet-header-i{
    line-height: 50px;
    position: absolute;
    right: 0px;
}
.sheet-header-span{
    font-size: 14px;
    line-height: 50px;
}
.sheet-content{
    position: relative;
    width: 100%;
    color:#999999;
    margin-bottom: 10px;
}
.sheet-content-list{
    width: 100%;
    line-height: 19px;
}
</style>
